
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>HTTP 跨域 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="laiq">
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-alerts/style.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-terminal/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-toggle-chapters/toggle.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../../styles/website.css">
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="HTML5新特性.html" />
    
    
    <link rel="prev" href="爬虫.html" />
    

    
        <link rel="shortcut icon" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
        <link rel="bookmark" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
        <link rel="apple-touch-icon" href='../../assets/images/wukong.png'>
    
    
        
        <link rel="apple-touch-icon" sizes="120x120" href="../../assets/images/wukong.png">
        
        <link rel="apple-touch-icon" sizes="180x180" href="../../assets/images/wukong.png">
        
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="HTTP作用域、上下文.html">
            
                <a href="HTTP作用域、上下文.html">
            
                    
                    Node 学习
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="HTTP作用域、上下文.html">
            
                <a href="HTTP作用域、上下文.html">
            
                    
                    HTTP 作用域、上下文
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Event事件.html">
            
                <a href="Event事件.html">
            
                    
                    Event 事件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Request.html">
            
                <a href="Request.html">
            
                    
                    Request
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="爬虫.html">
            
                <a href="爬虫.html">
            
                    
                    爬虫
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.2.5" data-path="HTTP跨域.html">
            
                <a href="HTTP跨域.html">
            
                    
                    HTTP 跨域
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="HTML5新特性.html">
            
                <a href="HTML5新特性.html">
            
                    
                    HTML5 新特性
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../php/设计模式/">
            
                <a href="../php/设计模式/">
            
                    
                    PHP 学习
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../php/设计模式/">
            
                <a href="../php/设计模式/">
            
                    
                    设计模式
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1.1" data-path="../php/设计模式/1.单例模式.html">
            
                <a href="../php/设计模式/1.单例模式.html">
            
                    
                    1.单例模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.1.2" data-path="../php/设计模式/2.抽象工厂模式.html">
            
                <a href="../php/设计模式/2.抽象工厂模式.html">
            
                    
                    2.抽象工厂模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.1.3" data-path="../php/设计模式/3.构造模式.html">
            
                <a href="../php/设计模式/3.构造模式.html">
            
                    
                    3.构造模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.1.4" data-path="../php/设计模式/4.原型模式.html">
            
                <a href="../php/设计模式/4.原型模式.html">
            
                    
                    4.原型模式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.1.5" data-path="../php/设计模式/5.工厂方法模式.md">
            
                <span>
            
                    
                    5.工厂方法模式
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../php/随手笔记/">
            
                <a href="../php/随手笔记/">
            
                    
                    随手笔记
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.2.1" data-path="../php/随手笔记/PHP页面静态化.html">
            
                <a href="../php/随手笔记/PHP页面静态化.html">
            
                    
                    PHP页面静态化
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../interview/">
            
                <a href="../interview/">
            
                    
                    面试相关
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >HTTP 跨域</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <!-- TOC -->
<ul>
<li><a href="#http&#x8DE8;&#x57DF;">HTTP&#x8DE8;&#x57DF;</a><ul>
<li><a href="#cors&#x539F;&#x7406;">CORS&#x539F;&#x7406;</a></li>
<li><a href="#&#x767E;&#x5EA6;jsonp&#x52A8;&#x6001;&#x5339;&#x914D;">&#x767E;&#x5EA6;jsonp,&#x52A8;&#x6001;&#x5339;&#x914D;</a><ul>
<li><a href="#&#x53C2;&#x8003;&#x6587;&#x7AE0;">&#x53C2;&#x8003;&#x6587;&#x7AE0;&#xFF1A;</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- /TOC -->
<h1 id="http&#x8DE8;&#x57DF;">HTTP&#x8DE8;&#x57DF;</h1>
<p>&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A;</p>
<ol>
<li>jsonp-&#x4EC5;&#x652F;&#x6301;get&#x65B9;&#x6CD5;</li>
<li>CORS-&#x6D4F;&#x89C8;&#x5668;(&gt;IE10)&#x548C;&#x670D;&#x52A1;&#x5668;&#x7684;&#x540C;&#x65F6;&#x652F;&#x6301;</li>
<li>websocket-HTML5&#x7684;&#x5168;&#x53CC;&#x5DE5;&#x901A;&#x4FE1;</li>
<li>postMessage-HTML5&#x8DE8;&#x6587;&#x6863;&#x901A;&#x4FE1; API&#xFF08;Cross-document messaging&#xFF09;</li>
</ol>
<h3 id="cors&#x539F;&#x7406;">CORS&#x539F;&#x7406;</h3>
<blockquote>
<p>&#x6574;&#x4E2A;CORS&#x901A;&#x4FE1;&#x8FC7;&#x7A0B;&#xFF0C;&#x90FD;&#x662F;&#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x52A8;&#x5B8C;&#x6210;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x7528;&#x6237;&#x53C2;&#x4E0E;&#x3002;&#x5BF9;&#x4E8E;&#x5F00;&#x53D1;&#x8005;&#x6765;&#x8BF4;&#xFF0C;CORS&#x901A;&#x4FE1;&#x4E0E;&#x540C;&#x6E90;&#x7684;AJAX&#x901A;&#x4FE1;&#x6CA1;&#x6709;&#x5DEE;&#x522B;&#xFF0C;&#x4EE3;&#x7801;&#x5B8C;&#x5168;&#x4E00;&#x6837;&#x3002;&#x6D4F;&#x89C8;&#x5668;&#x4E00;&#x65E6;&#x53D1;&#x73B0;AJAX&#x8BF7;&#x6C42;&#x8DE8;&#x6E90;&#xFF0C;&#x5C31;&#x4F1A;&#x81EA;&#x52A8;&#x6DFB;&#x52A0;&#x4E00;&#x4E9B;&#x9644;&#x52A0;&#x7684;&#x5934;&#x4FE1;&#x606F;&#xFF0C;&#x6709;&#x65F6;&#x8FD8;&#x4F1A;&#x591A;&#x51FA;&#x4E00;&#x6B21;&#x9644;&#x52A0;&#x7684;&#x8BF7;&#x6C42;&#xFF0C;&#x4F46;&#x7528;&#x6237;&#x4E0D;&#x4F1A;&#x6709;&#x611F;&#x89C9;&#x3002;
&#x56E0;&#x6B64;&#xFF0C;&#x5B9E;&#x73B0;CORS&#x901A;&#x4FE1;&#x7684;&#x5173;&#x952E;&#x662F;&#x670D;&#x52A1;&#x5668;&#x3002;&#x53EA;&#x8981;&#x670D;&#x52A1;&#x5668;&#x5B9E;&#x73B0;&#x4E86;CORS&#x63A5;&#x53E3;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x8DE8;&#x6E90;&#x901A;&#x4FE1;&#x3002;</p>
</blockquote>
<p>&#x6D4F;&#x89C8;&#x5668;&#x5C06;CORS&#x8BF7;&#x6C42;&#x5206;&#x6210;&#x4E24;&#x7C7B;&#xFF1A;&#x7B80;&#x5355;&#x8BF7;&#x6C42;&#xFF08;simple request&#xFF09;&#x548C;&#x975E;&#x7B80;&#x5355;&#x8BF7;&#x6C42;&#xFF08;not-so-simple request&#xFF09;&#x3002;</p>
<p>&#x7B80;&#x5355;&#x8BF7;&#x6C42;&#xFF1A;  </p>
<pre><code>&#x8BF7;&#x6C42;&#xFF1A;
    &#x5934;&#x4FE1;&#x606F;&#x4E4B;&#x4E2D;&#xFF0C;&#x589E;&#x52A0;&#x4E00;&#x4E2A;`Origin`&#x5B57;&#x6BB5;
&#x8FD4;&#x56DE;&#xFF1A;    
    Access-Control-Allow-Origin: http://api.bob.com
    Access-Control-Allow-Credentials: true
    Access-Control-Expose-Headers: FooBar
    Content-Type: text/html; charset=utf-8
</code></pre><p>&#x975E;&#x7B80;&#x5355;&#x8BF7;&#x6C42;:
&#x8BF7;&#x6C42;&#x65B9;&#x6CD5;&#x662F;<code>PUT</code>&#x6216;<code>DELETE</code>&#xFF0C;&#x6216;&#x8005;<code>Content-Type</code>&#x5B57;&#x6BB5;&#x7684;&#x7C7B;&#x578B;&#x662F;<code>application/json</code>&#x3002;
&#x975E;&#x7B80;&#x5355;&#x8BF7;&#x6C42;&#x7684;CORS&#x8BF7;&#x6C42;&#xFF0C;&#x4F1A;&#x5728;&#x6B63;&#x5F0F;&#x901A;&#x4FE1;&#x4E4B;&#x524D;&#xFF0C;&#x589E;&#x52A0;&#x4E00;&#x6B21;HTTP&#x67E5;&#x8BE2;&#x8BF7;&#x6C42;&#xFF0C;&#x79F0;&#x4E3A;&quot;&#x9884;&#x68C0;&quot;&#x8BF7;&#x6C42;OPTIONS&#xFF08;preflight&#xFF09;&#x3002;</p>
<h3 id="&#x767E;&#x5EA6;jsonp&#x52A8;&#x6001;&#x5339;&#x914D;">&#x767E;&#x5EA6;jsonp,&#x52A8;&#x6001;&#x5339;&#x914D;</h3>
<pre><code class="lang-js">
<span class="hljs-comment">/** 
 * &#x767E;&#x5EA6;jsonp&#x8BF7;&#x6C42;&#x5730;&#x5740;
 * https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&amp;json=1&amp;cb=kk
 * &#x53C2;&#x6570;
 * wd &#x641C;&#x7D22;&#x5B57;&#x7B26;
 * cb &#x56DE;&#x8C03;&#x51FD;&#x6570;
**/</span>

$.ajax({  
    type : <span class="hljs-string">&quot;get&quot;</span>,  
    <span class="hljs-keyword">async</span>:<span class="hljs-literal">false</span>,  
    url : <span class="hljs-string">&quot;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&quot;</span>,  
    data : {wd: <span class="hljs-string">&apos;aa&apos;</span>}
    dataType : <span class="hljs-string">&quot;jsonp&quot;</span>,<span class="hljs-comment">//&#x6570;&#x636E;&#x7C7B;&#x578B;&#x4E3A;jsonp  </span>
    jsonp: <span class="hljs-string">&quot;jsonpCallback&quot;</span>,<span class="hljs-comment">//&#x670D;&#x52A1;&#x7AEF;&#x7528;&#x4E8E;&#x63A5;&#x6536;callback&#x8C03;&#x7528;&#x7684;function&#x540D;&#x7684;&#x53C2;&#x6570;  </span>
    success : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">json</span>)</span>{  
        $(<span class="hljs-string">&quot;#showcontent&quot;</span>).text(<span class="hljs-string">&quot;Result:&quot;</span>+data.g)  
    },  
    error:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{  
        alert(<span class="hljs-string">&apos;fail&apos;</span>);  
    }  
});
</code></pre>
<h2 id="&#x53C2;&#x8003;&#x6587;&#x7AE0;&#xFF1A;">&#x53C2;&#x8003;&#x6587;&#x7AE0;&#xFF1A;</h2>
<ol>
<li><a href="http://www.ruanyifeng.com/blog/2016/04/cors.html" target="_blank">&#x8DE8;&#x57DF;&#x8D44;&#x6E90;&#x5171;&#x4EAB; CORS &#x8BE6;&#x89E3;</a></li>
<li><a href="https://segmentfault.com/a/1190000016756432" target="_blank">&#x8DE8;&#x57DF;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;</a></li>
</ol>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="爬虫.html" class="navigation navigation-prev " aria-label="Previous page: 爬虫">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="HTML5新特性.html" class="navigation navigation-next " aria-label="Next page: HTML5 新特性">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"HTTP 跨域","level":"1.2.5","depth":2,"next":{"title":"HTML5 新特性","level":"1.2.6","depth":2,"path":"docs/node/HTML5新特性.md","ref":"docs/node/HTML5新特性.md","articles":[]},"previous":{"title":"爬虫","level":"1.2.4","depth":2,"path":"docs/node/爬虫.md","ref":"docs/node/爬虫.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-sharing","include-codeblock","alerts","sitemap-general","favicon","github","terminal","toggle-chapters"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"github":{"url":"https://gitee.com/tonygeli/"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sitemap-general":{"prefix":"http://gitbook.zhangjikai.com"},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"favicon":{"shortcut":"./assets/images/favicon.ico","bookmark":"./assets/images/favicon.ico","appleTouch":"./assets/images/wukong.png","appleTouchMore":{"120x120":"./assets/images/wukong.png","180x180":"./assets/images/wukong.png"}},"alerts":{},"include-codeblock":{"check":false,"edit":false,"fixlang":false,"lang":"","template":"ace","theme":"monokai","unindent":true},"terminal":{"copyButtons":true,"fade":false,"style":"flat"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"toggle-chapters":{}},"theme":"default","author":"laiq","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"zh-hans","gitbook":"*","description":"学习记录与分享"},"file":{"path":"docs/node/HTTP跨域.md","mtime":"2018-10-30T13:31:10.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-01T05:28:55.014Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-alerts/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-github/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-terminal/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-toggle-chapters/toggle.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

